<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <el-row>
      <div class="examinee_image_list_content">
        <!-- 数据列表 -->
        <div v-if="listData != undefined && listData.length > 0">
          <el-row>
            <el-col :span="15">
              <el-table :data="listData" border size="mini" style="width: 100%">
                <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  prop="name"
                  label="考生姓名"
                  align="center"
                ></el-table-column>

                <el-table-column
                  prop="identity_number"
                  label="证件号"
                  align="center"
                ></el-table-column>

                <el-table-column
                  prop="exam_area"
                  label="考点"
                  align="center"
                ></el-table-column>

                <el-table-column width="180" label="证件照" align="center">
                  <template slot-scope="scope">
                    <img
                      v-if="
                        scope.row.person_photo != null &&
                        scope.row.person_photo != '' &&
                        scope.row.person_photo != undefined
                      "
                      class="examinee_image_list_img"
                      :src="baseAPIUrl + scope.row.person_photo"
                    />
                    <div v-else>无</div>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="examinee_image_list_pagination">
                <el-pagination
                  @size-change="listSizeChange"
                  @current-change="listCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="pageSizes"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                >
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row v-else>
          <el-empty description="暂无数据"></el-empty>
        </el-row>
      </div>
    </el-row>
  </div>
</template>
<style src="../../assets/css/examinee/examineeImageList.css" scoped></style>

<script>
export default {
  name: "ExamineeImageList",
  components: {},
  data() {
    return {
      baseAPIUrl: this.$store.state.baseAPIUrl,
      listData: [], // 考生列表
      loadingKey: false,
      loadingText: "",
      currentPage: 1, // 当前页
      pageSizes: [10, 20, 50, 100, 200], // 可选页容量
      pageSize: 50, // 当前页容量
      total: 0, // 总条数
    };
  },
  created: function () {
    this.getListDataFn();
  },
  methods: {
    // 获取列表数据
    getListDataFn: function () {
      let that = this;
      let url = "/admin/students/allStuPhotos";
      let data = {
        page: this.currentPage,
        perPage: this.pageSize,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.listData = response.stu_infos;
            that.total = response.total_count;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 页容量改变
    listSizeChange: function (val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getListDataFn();
    },
    // 当前页改变
    listCurrentChange: function (val) {
      this.currentPage = val;
      this.getListDataFn();
    },
  },
};
</script>
